<template>
    <div>
        <header>
            <div class="icon_left">
                <a href="javascript:;" class="back" @click="goback"></a>
            </div>
            <div class="middle_text">
                选择城市
            </div>
            <div class="icon_right">
                <a href="javascript:;" class="home" @click="tohome">
                    <img src="../assets/images/home.png" alt="">
                </a>
                <a href="javascript:;" class="search_city">
                    <img src="../assets/images/search_city.png" alt="">
                </a>
            </div>
        </header>
        <main>
            <div class="location-city">
                定位城市：
                <img src="../assets/images/icon_address.png" alt="">
                <span>{{this.$store.state.location}}</span>
            </div>
            <h4>最近访问</h4>
            <ul class="recent_cities">
                <li v-for="(item,index) in this.$store.state.recentCities" :key="index">{{item}}</li>
            </ul>
            <h4>热门城市</h4>
            <ul class="recent_cities">
                <li><a href="javascript:;" @click="changeCity($event)">鞍山</a></li>
                <li><a href="javascript:;" @click="changeCity($event)">沈阳</a></li>
                <li><a href="javascript:;" @click="changeCity($event)">大连</a></li>
            </ul>
        </main>
    </div>
</template>

<script>
    export default {
        methods:{
            goback(){
                this.$router.go(-1);//返回上页
            },
            changeCity(event){
                // console.log(event.target.innerHTML);
                this.$store.commit('changeCity',event.target.innerHTML);//通知vuex数据文件更改所在城市
                if(event.target.innerHTML == '沈阳'){
                    this.$store.commit('changeDistrict','沈阳大悦城 A 座');
                }else if(event.target.innerHTML == '鞍山'){
                    this.$store.commit('changeDistrict','永乐公园');
                }else if(event.target.innerHTML == '大连'){
                    this.$store.commit('changeDistrict','大连甘井子区');
                }
                this.$router.push('/');
            },
            tohome(){
                this.$router.push('/');
            }
        }
    };
</script>

<style scoped>
header {
    display: flex;
    height: 50.5px;
    align-items: center;
    background-image: linear-gradient(135deg, #ffd000 0%, #ffbd00 100%);
}
header .icon_left,
header .icon_right {
    width: 95px;
}
header .middle_text {
    flex: 1;
    text-align: center;
}
header .icon_right {
    display: flex;
    align-items: center;
    justify-content: space-around;
}
header .icon_left .back {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 20px;
    border-left: 1.2px solid #000;
    border-bottom: 1.2px solid #000;
    transform: rotate(45deg);
}
header .home,
header .search_city {
    display: inline-block;
    width: 24px;
    height: 24px;
}

header .icon_right img {
    width: 100%;
}
main {
    padding: 10px;
}
main h4 {
    font-size: 15px;
    font-weight: 500;
    margin: 15px 0 10px;
}
main .location-city {
    height: 45px;
    line-height: 45px;
    border: 1px solid #DDD8CE;
    padding-left: 10px;
    border-radius: 3px;
    background-color: #FDFDFC;
    font-size: 14px;
}
main .location-city img {
    width: 12px;
    height: 13.7px;
    margin-top: -3px;
    vertical-align: middle;
}
main .recent_cities {
    display: flex;
}
main .recent_cities li {
    flex: 1;
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd8ce;
    text-align: center;
    font-size: 14px;
}
main .recent_cities li:nth-child(1+n){
    margin-left: -1px;
}
</style>

